<template>
  <el-card shadow="never" class="aui-card--fill el-card--msginfo">
    <el-container class="el-container--privilege">
      <el-header height="80">
        <el-row>
          <el-col :span="24">
            <el-button @click="fnChangeShowInfo" icon="el-icon-arrow-left" size="small">{{ $t('goBack') }}</el-button>
            <el-button type="danger" @click="msgNoDisturbing" icon="el-icon-magic-stick" size="small" v-if="rejectionFlag">{{ '拒收' }}</el-button>
          </el-col>
        </el-row>
        <div class="msginfo-header">
          {{ infoData.title }}
        </div>
      </el-header>
      <el-main>
        <div class="msginfo-main" v-html="(infoData.content || '').replace(/\n/g,'<br/>')"></div>
        <el-link type="success" @click="openUrlNewTab" v-if="this.infoData.url" class="msginfo-url">
          {{ '点击查看详情' }}
        </el-link>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="24">{{ infoData.sender }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">{{ infoData.sendDate }}</el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-card>
</template>

<style lang="scss">
.el-card--msginfo .msginfo-header {
  font-weight: bold;
  text-align: center;
}
.el-card--msginfo .msginfo-main {
  padding: 50px;
  min-height: 180px;
  line-height: 30px;
}
.el-card--msginfo .el-footer {
  text-align: right;
}
.el-card--msginfo .el-footer .el-col {
  padding: 5px;
}
.el-card--msginfo {
  .msginfo-url {
    margin-left: 40px;
  }
}
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import URLUtil from '@/utils/url'
import { isURL } from '@/utils/validate'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      rejectionFlag: false
    }
  },
  methods: {
    msgNoDisturbing () {
      this.$confirm('您确认设置此条信息的免打扰吗？', '提示', {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/msg/msgNoDisturbing/', {
          msgId: this.bizContentLog.fid,
          ruleId: this.bizContentLog.ruleId,
          userId: this.$store.state.user.id,
          bizId: this.bizContentLog.bizId
        }).then(({ data: res }) => {
          if (res.code === 0) {
            this.$message({
              message: '设置免打扰成功！',
              type: 'success',
              duration: 500,
              onClose: () => { }
            })
          }
        })
      })
    },
    rejection () {
      this.$http.get('msg/msgBizContentLog/judgeRejection', { params: { extendId: this.infoData.bizId } })
        .then(({ data: res }) => {
          console.log('res', res)
          if (res.data !== null) {
            this.rejectionFlag = res.data.rejectionFlag
            this.bizContentLog = res.data.bizContentLog
          }
        })
    },
    // url 打开方式 新标签页
    openUrlNewTab () {
      if (isURL(this.infoData.url)) {
        window.open(this.infoData.url, '_blank')
      } else {
        // 路由方式
        let urlParams = URLUtil.fitUrl(this.infoData.url)
        var router = {
          name: urlParams.url,
          id: 'jump',
          menuId: this.$route.meta.menuId,
          oldName: 'msg-msgRecord',
          path: urlParams.url,
          title: '查看'
        }
        this.$options.methods.openNewTab(this.$router, router, urlParams.params)
      }
    }
  },
  props: {
    infoData: {
      type: Object,
      required: true
    },
    fnChangeShowInfo: {
      type: Function,
      required: true
    },
    updateReadStatus: {
      type: Function,
      required: true
    }
  }
}
</script>
